<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#cont{
			margin-top: 100px;
			width: 400px;
			height: 400px;
			border: 1px solid blue;
			position: relative;
		}
		#main{
			width: 400px;
			height: 400px;
			border: 1px solid red;
			position: relative;
			top: -100px;
		}
		.row{
			height: 100px;
		}
		.row div{
			width: 98px;
			height: 98px;
			border: 1px solid gray;
			float: left;
		}
		.black{
			background: orange;
		}
	</style>
</head>
<body>
	<h1>别踩白块:搭建框架</h1>
	<div id="cont">
		<div id="main"></div>
	</div>
</body>
<script type="text/javascript">
	var main = document.getElementById('main');
	function cDiv(className){
		var div = document.createElement('div');
		if(className){
			div.className = className;
		}
		return div;
	}

	function cRow(){
		var ind = Math.floor(Math.random()*4);
		var row = cDiv('row');
		for(var i=0; i<4; i++){
			if(i == ind){
				row.appendChild(cDiv('black'));
			}else{
				row.appendChild(cDiv());
			}
		}

		if(main.firstChild){
			main.insertBefore(row,main.firstChild);
		}else{
			main.appendChild(row);
		}
	}

	function init(){
		for(var i=0; i<4; i++){
			cRow();
		}
		window.setInterval('move()',40);
	}
	function getStyle(el,attr){
		return el.currentStyle ? el.currentStyle[attr] : el.getComputedStyle(el,null)[attr];
	}

	function move(){
		var top = getStyle(main,'top');
		top = parseInt(top);
		main.style.top = top + 2 + 'px';
	}

	init();
</script>
</html>